<template>
  <div class="w-full h-full">
    <!-- Swiper 容器 -->
    <Swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="30"
      :loop="true"
      :pagination="{ clickable: true }"
      :navigation="true"
      :autoplay="{ delay: 3000 }"
    >
      <!-- 轮播项 -->
      <SwiperSlide v-for="(item, index) in images" :key="index">
        <img :src="item" class="slide-image" alt="轮播图" />
      </SwiperSlide>

      <!-- 分页器（可选，需配合 pagination 配置） -->
      <!-- <template #pagination>
        <div class="swiper-pagination"></div>
      </template> -->

      <!-- 导航按钮（可选，需配合 navigation 配置） -->
      <!-- <template #navigation>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </template> -->
    </Swiper>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
// 引入 Swiper 核心组件和样式
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
// 引入所需模块（按需导入）
import { Autoplay, Pagination, Navigation } from 'swiper/modules'

// 注册使用的模块
const modules = [Autoplay, Pagination, Navigation]

// 轮播图数据
const images = [
  'https://cc-img.townimg.com/uploads/2023/01/20230902232839267.jpg',
  'https://cc-img.townimg.com/uploads/2023/01/20230902232839267.jpg',
]
</script>

<style scoped>
.swiper-container {
  width: 800px;
  max-width: 100%;
  height: 400px;
  margin: 0 auto;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
